<template>
  <div style="margin: 0.5em;">
  <div class="image-preview">
    <el-image style="width: 100px; height: 100px;border-radius: 50px;" :src="url" :zoom-rate="1.2" :preview-src-list="srcList"
              :initial-index="4" fit="cover" />
  </div>
  <el-form ref="formRef" :model="loginForm"  class="demo-dynamic">
    <el-form-item prop="email"  :rules="[
            {
                required: true,
                message: '请输入你的邮箱',
                trigger: 'blur',
            },
        ]">
      <el-input v-model="loginForm.email" placeholder="请输入你的邮箱"  >
        <template #suffix>
          <el-icon class="el-input__icon"><Message /></el-icon>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item prop="password" :rules="{
            required: true,
            message: '密码不能为空',
            trigger: 'blur',
        }">
      <el-input v-model="loginForm.password"  placeholder="请输入你的密码" show-password >
        <template #suffix>
          <el-icon class="el-input__icon"><WarnTriangleFilled /></el-icon>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="router.push('/register')">用户注册</el-button>
      <el-button type="primary" @click="submitForm(loginForm)">登录</el-button>
      <el-button type="primary" @click="router.push('/retrieve')">修改密码</el-button>
    </el-form-item>
  </el-form>
  </div>
</template>

<script setup>
import { reactive,} from 'vue'
import {Message,WarnTriangleFilled} from '@element-plus/icons-vue'
import {login} from "@/http/user";
import {useUserToken} from "@/store/counter";
import router from "../router";
const url =
    'https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTKYL5rCmOPfxXbHfUYib0ZBJtOxrWFABpOEWHKHiaWjP7NmMsiabZDIuznIibHYQNKicH5ic7a5h4jZ2ZjA/132'
const loginForm = reactive({
  password: "",
  email: ""
})
const userToken=useUserToken();
const submitForm = (formEl) => {
  // console.log(formEl)
  if (!formEl) return
  console.log("发送登录请求")
  login(formEl).then(res=>{
    if (res.code!==1){
      alert(res.msg)
    }
    //设置登录状态
    userToken.setUserToken(res.data.userinfo.token)
    userToken.setUserid(res.data.userinfo.id)
    router.push("/")
  }).catch(err=>{
    alert(err)
  })
}

</script>

<style scoped>

.el-form-item__content{
  justify-content: center;
}
</style>
